<template>
  <div ref="chartContainer" class="flow-panel"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chartContainer = ref(null)

onMounted(() => {
  const chart = echarts.init(chartContainer.value)
  chart.setOption({
    title: {
      text: '今日客流趋势',
      left: 'center',
      textStyle: { color: '#fff' },
    },
    xAxis: {
      data: ['09:00', '10:00', '11:00', '12:00', '13:00'],
      axisLine: { lineStyle: { color: '#fff' } },
    },
    yAxis: { axisLine: { lineStyle: { color: '#fff' } } },
    series: [
      {
        type: 'line',
        data: [1200, 1500, 1800, 1600, 2000],
        smooth: true,
        lineStyle: { color: '#42b983' },
      },
    ],
    backgroundColor: 'transparent',
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
  })
})
</script>

<style scoped>
.flow-panel {
  width: 400px;
  height: 300px;
  background: rgba(34, 44, 60, 0.8);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
}
</style>
